<!--期限结构曲线-->
<template >
   <div style="text-align: center">
     行权价(%) <el-select  @change="strikeSelectChg"
                v-model="strikeSelect" label="行权价(%)"
                placeholder="选择行权价"
                style="width: 240px"
    >
      <el-option
          v-for="item in pointList"
          :key="item.key"
          :label="item.val"
          :value="item.key"
      />
    </el-select>
  <div ref="priceVolChartRef" :class="className" :style="{height:height,width:width}" />
   </div>
</template>

<script>
import * as echarts from 'echarts'
const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '800px'
    },
    height: {
      type: String,
      default: '500px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      chartData:{},
      chart: null,
      strikeSelect:null,
      pointList:[],
      uuId:Math.random(),
      proxy:{},
      title:'波动率期限曲线',
      listData:[],
      xName:null,
      yName:null,
      pointName:null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.priceVolChartRef, 'macarons');
      // this.chart = echarts.init(document.getElementById(this.myId), 'macarons')
      this.setOptions(this.chartData)
    },
    setPointData(proxy,listData,flag){
      this.pointList=[];
      let pData=[];
      let pDataList=[];
      if(listData.resultList.length>0){
        for(let i=0;i<listData.resultList.length;i++){
          //绘制时横坐标精度为2
          pData.push(listData.resultList[i][this.pointName]);
        }
        pData=this.proxy.lsh.uniq(pData);
        for(let i=0;i<pData.length;i++){
          pDataList.push({'key':pData[i],'val':proxy.lsh.round(proxy.lsh.multiply(pData[i],100),2)});
        }
        this.pointList=pDataList;
        //是否覆盖为100
        if(flag===true){
          this.strikeSelect=1;
        }
      }
    },
    /**
     * 下拉选择后重新生成曲线
     *
     */
    strikeSelectChg(newVal){
      this.strikeSelect=newVal;
      this.setCharData(this.proxy,this.title,this.listData,this.xName,this.yName,this.pointName,false)
    },
    /**
     * 曲线调用数据处理方法
     * @param proxy  vue上下文实例
     * @param title  曲线名称
     * @param listData 曲线数据
     * @param xName   横坐标字段名
     * @param yName   纵坐标字段名
     * @param flag    下拉项是否覆盖默认值
     */
    setCharData(proxy,title,listData,xName,yName,pointName,flag){
      this.proxy=proxy;
      this.title=title;
      this.listData=listData;
      this.xName=xName;
      this.yName=yName;
      this.pointName=pointName;
      if(listData==null||listData.length<1){
        this.initChart([]);
        return;
      }
      const resultList=listData.resultList;
      let lineChartData=this.chart.getOption();
      if(lineChartData==undefined){
        lineChartData={};
      }
      this.setPointData(proxy,listData,flag);
      let xAxisData = [];
      let seriesObj ={};
      let seriesData=[];
      let seriesArr = [];
      lineChartData.xAxis=[];
      lineChartData.series=[];
      for (let i = 0; i < resultList.length; i++) {
        if(this.strikeSelect=== resultList[i][pointName]){
          //绘制时横坐标精度为2
          xAxisData.push(resultList[i][xName]);
          seriesArr.push(proxy.lsh.round(resultList[i][yName]*100,2));
        }
        seriesData=seriesArr;
      }
      if (resultList.length > 0) {
        lineChartData.titleText = title;
        lineChartData.seriesName=[title];
        seriesObj[title]=seriesData;
      }else{
        lineChartData.titleText=title;
      }
      //去重
      xAxisData = proxy.lsh.uniq(xAxisData);
      lineChartData.xAxisData = xAxisData;
      lineChartData.seriesData = seriesObj;
      lineChartData.yAxis=[]
      lineChartData.xAxis=[]
      this.chartData=lineChartData;
      this.chart.dispose();
      this.initChart();
    },
    clearChart(){
      this.pointList=[];
      this.chartData=[];
      this.strikeSelect=1
      this.setOptions({'titleText':'期限结构曲线','xAxisData':[],'seriesName':null});
    },
    setOptions(expectedData) {
      unwarp(this.chart).setOption({
        title: {
          text: expectedData.titleText
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '10%',
          top: '100px',
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
          }
        },
        xAxis: {
          axisLine: {
            symbol: ['none', 'arrow']
          },
          name:'期限',
          min:'dataMin',
          max:'dataMax',
          nameLocation:'middle',
          nameGap:30,
          type: 'category',
          boundaryGap: false,
          data: expectedData.xAxisData
        },
        yAxis: {
          show:true,
          min:'dataMin',
          max:'dataMax',
          axisLine: {
            symbol: ['none', 'arrow']
          },
          name: '波动率(%)',
          type: 'value'
        },
        series: this.setSeries(expectedData)
      },true);
    },
    setSeries(chartData){
      let series=[];
      if(chartData.seriesName!=null&&chartData.seriesName.length>0){
        for(let i = 0; i < chartData.seriesName.length; i++) {
          let item = {};
          item.name = chartData.seriesName[i];
          item.type = 'line';
          item.data = chartData.seriesData[item.name];
          item.smooth = true;
          item.stack= 'Total',
              series.push(item);
        }
        return series;
      }else{
        return [];
      }
    },
  }
}
</script>
